import React, {ReactNode, useState} from 'react';
import {OrganizationGraph} from '@ant-design/graphs';
import {findByTreeList} from '@/services/ant-design-pro/users';
import {useMount} from 'ahooks';
import {NodeData, OrgItem} from '@ant-design/charts';
import {useLocation} from 'umi';

const DemoOrganizationGraph: React.FC = () => {
  const {query} = useLocation ();
  const [dataArray, setDataArray] = useState<ReactNode> ();
  useMount ( () => {
    console.log ( 'paramsparamsparams', query );
    findByTreeList ( query?.userId ).then ( (res) => {
      //console.log ( res.data );
      //  console.log ( data1 );
      // console.log ( res.data );
      setDataArray ( getDataReact ( res.data ) );
    } );
  } );
  const getDataReact = (data: NodeData<OrgItem>) => {
    console.log ( data );
    return (
      <OrganizationGraph
        data={data}
        style={{height:"100vh" }}
        edgeCfg={{
          type: 'polyline',
          style: {
            stroke: '#000',
            endArrow: false,
          }
        }}
        markerCfg={(cfg) => {
          // @ts-ignore
          const { level, direction } = cfg.value;
          // @ts-ignore
          const show = level !== 1 && cfg.children && cfg.children.length > 0;
          return {
            position: direction,
            show,
          };
        }}
        nodeCfg={{
          autoWidth: true,
          padding: 10,
          autoFit: true,
          fitCenter: true,
          animate: true,
          radius: 5,
          style: (node) => {
            return node?.id === 'joel'
              ? {
                fill: '#1890ff',
                stroke: '#91d5ff',
                radius: 5,
              }
              : {
                fill: '#1890ff',
                stroke: '#91d5ff',
                radius: 5,
              };
          },
          label: {
            style: (node, group, type) => {
              console.log ( 'NNNNNNNNNNNNNNNNNNN', type );
              const styles = {
                icon: {
                  width: 32,
                  height: 32,
                  radius: 10,
                },
                title: {
                  fill: '#fff',
                },
                name: {
                  fill: '#fff',
                  textAnchor: 'center',
                },
              };
              // @ts-ignore
              return styles[type];
            },
          },
        }}
      />
    );
  };
  return <>{dataArray}</>;
};

export default DemoOrganizationGraph;
